@using OrchardCore.Commerce.MoneyDataType.Abstractions
@using System.Text.Json
@model OrderPartViewModel

@inject IMoneyService MoneyService

@{
    var serializedAvailableCurrencyCodes = JsonSerializer.Serialize(
        MoneyService.Currencies.ToDictionary(currency => currency.CurrencyIsoCode, currency => currency.Symbol));
    var defaultCurrencyCode = MoneyService.DefaultCurrency.CurrencyIsoCode ?? "USD";
}

<section id="shopping-cart">
    <div class="panel-heading">
        <h3>@T["Ordered Items"]</h3>
    </div>
    <fieldset class="mb-3">
        <label>@T["Product properties"]</label>
        <ul>
            <li class="hint">
                @T["Product Name and Attributes cells are only populated after submitting the changes."]
            </li>
            <li class="hint">
                @T["Currencies: Selected currencies need to be the same for all Products."]
            </li>
        </ul>
    </fieldset>
    <div class="p-4">
        <div class="d-none d-sm-flex row border-bottom mt-3 pb-2 font-weight-bold">
            <div class="col-xs-12 col-sm-2">@T["Product Name"]</div>
            <div class="col-xs-12 col-sm-1">@T["Quantity"]</div>
            <div class="col-xs-12 col-sm-2">@T["Product SKU"]</div>
            <div class="col-xs-12 col-sm-1">@T["Unit Price Value"]</div>
            <div class="col-xs-12 col-sm-1">@T["Unit Price Currency"]</div>
            <div class="col-xs-12 col-sm-4 text-center">@T["Attributes"]</div>
            <div class="col-xs-12 col-sm-1">@T["Actions"]</div>
        </div>
        <div id="orderPart__products" class="orderPart__products">
            <div v-for="(lineItem, index) in lineItems">
                <div class="row border-bottom mt-3 pb-2">
                    <div class="col-xs-12 col-sm-2 d-flex">
                        <a :href="lineItem.productUrl" target="_blank">{{ lineItem.productName }}</a>
                    </div>
                    <div class="col-xs-12 col-sm-1 d-flex">
                        <input class="w-100" :name="'OrderPart.LineItems[' + index + '].Quantity'" v-model="lineItem.quantity">
                    </div>
                    <div class="col-xs-12 col-sm-2 d-flex">
                        <input :name="'OrderPart.LineItems[' + index + '].ProductSku'" v-model="lineItem.productSku">
                    </div>
                    <div class="col-xs-12 col-sm-1 d-flex">
                        <input class="w-100" :name="'OrderPart.LineItems[' + index + '].UnitPriceValue'" v-model="lineItem.unitPriceValue">
                    </div>
                    <div class="col-xs-12 col-sm-1 d-flex">
                        <select :name="'OrderPart.LineItems[' + index + '].UnitPriceCurrencyIsoCode'" v-model="lineItem.unitPriceCurrencyIsoCode">
                            <option v-for="(value, key) in availableCurrencyCodes" :value="key">{{ key }}</option>
                       </select>
                    </div>
                    <div class="col-xs-12 col-sm-4 d-flex">
                        <div class="d-flex col-sm-3 mx-1 align-items-center" v-for="(values, key) in lineItem.availableTextAttributes[lineItem.productSku]">
                            <label class="px-1">{{ key }}</label>
                            <select :name="'OrderPart.LineItems[' + index + '].SelectedAttributes[Text][' + key + ']'" v-model="lineItem.selectedAttributes['Text'][key]">
                                <option value=""></option>
                                <option v-for="value in values" :value="value">{{ value }}</option>
                            </select>
                        </div>
                        <div class="col-sm-3 mx-1 w-auto my-auto" v-for="(value, key) in lineItem.availableBooleanAttributes[lineItem.productSku]">
                            <div class="d-flex flex-row">
                                <input v-model="lineItem.selectedAttributes['Boolean'][value]"
                                       :id="lineItem.productSku + '.' + value"
                                       type="checkbox"
                                       :name="'OrderPart.LineItems[' + index + '].SelectedAttributes[Boolean][' + value + ']'"
                                       value="true"
                                       class="form-check-input" />
                                <label class="px-1" :for="lineItem.productSku + '.' + value">{{ value }}</label>
                            </div>
                        </div>
                        <div class="col-sm-4 mx-1" v-for="(value, key) in lineItem.availableNumericAttributes[lineItem.productSku]">
                            <div class="d-flex flex-row align-items-center">
                                <label class="px-1">{{ value }}:</label>
                                <input v-model="lineItem.selectedAttributes['Numeric'][value]"
                                       :id="lineItem.productSku + '.' + value"
                                       type="number"
                                       :min="lineItem.numericAttributeSettings[lineItem.productSku][value].minimum"
                                       :max="lineItem.numericAttributeSettings[lineItem.productSku][value].maximum"
                                       :placeholder="lineItem.numericAttributeSettings[lineItem.productSku][value].placeholder"
                                       :required="lineItem.numericAttributeSettings[lineItem.productSku][value].required"
                                       :step="Math.pow(10, -lineItem.numericAttributeSettings[lineItem.productSku][value].decimalPlaces)"
                                       :name="'OrderPart.LineItems[' + index + '].SelectedAttributes[Numeric][' + value + ']'"
                                       class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-1">
                        <button class="btn btn-danger" @@click.prevent="lineItems.splice(index, 1)">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="row mt-3 mb-3 pb-2">
                <div class="col-xs-12 col-sm-10 font-weight-bold">@T["Total"]</div>
                <div class="col-xs-12 col-sm-1">
                    <strong>{{ displayedCurrency }} {{ calculatedTotal }}</strong>
                </div>
            </div>
        </div>
        <button id="addButton" class="btn btn-secondary mb-3">@T["Add Item"]</button>
    </div>
</section>
<div class="form-group">
    <div class="panel-heading">
        <label>@T["Charges"]</label>
    </div>
    @if (Model.Charges?.Any() == true)
    {
        @foreach (var charge in Model.Charges)
        {
            <div class="mt-3 mb-3">
                <div class="row">
                    <div class="col-md-6 col-lg-2">
                        <span>@T["Kind:"]</span>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <span>@charge.Kind</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-lg-2">
                        <span>@T["Amount:"]</span>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <span>@charge.Amount</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-lg-2">
                        <span>@T["Transaction Id:"]</span>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <span>@charge.TransactionId</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-lg-2">
                        <span>@T["Created:"]</span>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <span>@charge.CreatedUtc</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-lg-2">
                        <span>@T["Charge Text:"]</span>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <span>@charge.ChargeText</span>
                    </div>
                </div>
            </div>
        }
    }
    else
    {
        <p>@T["There are no charges stored in this order."]</p>
    }
</div>

<script asp-name="@ResourceNames.ToggleSecondAddress" at="Foot"></script>
<script at="Head" asp-name="vuejs"></script>
<script at="Foot" depends-on="vuejs">
    const vueQuery = '#orderPart__products';

    let lineItems = @Json.Serialize(Model.LineItems);
    lineItems.forEach(item => {
        item.productUrl = '/Admin/Contents/ContentItems/' + item.productRouteValues.ContentItemId + '/Edit';
    })

    let products = new Vue({
        el: vueQuery,
        data: {
            availableCurrencyCodes: JSON.parse('@Html.Raw(serializedAvailableCurrencyCodes)'),
            lineItems: lineItems,
        },
        computed: {
            calculatedTotal() {
                return this.lineItems
                    .map(item => item.quantity * item.unitPriceValue)
                    .reduce((total, value) => total + value, 0);
            },
            displayedCurrency() {
                return this.availableCurrencyCodes[this.lineItems[0]?.unitPriceCurrencyIsoCode];
            }
        },
    });

    document.getElementById('addButton').addEventListener('click', function (event) {
        event.preventDefault();
        products.lineItems.push({
            "productName": null,
            "productUrl": null,
            "quantity": 0,
            "productSku": null,
            "unitPriceValue": 0,
            "unitPriceCurrencyIsoCode": '@defaultCurrencyCode',
            "availableTextAttributes": '',
            "availableBooleanAttributes": '',
            "availableNumericAttributes": '',
            "numericAttributeSettings": '',
            "selectedAttributes": '',
        });
    });
</script>
